
<!DOCTYPE html
		PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!-- script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
	<script type="text/javascript" src="Timeout.js"></script>
	<script type="text/javascript" src="jquery.rotate.js"></script>
	<script type="text/javascript" src="countdown.jquery.js"></script>
	<script>
(function($){
$(function(){
	$('.timer').css({opacity: .3});
	$('.timer .timer_right').css({rotate: 180});
	$('.timer .timer_left .timer_ticker').animate({rotate: 180}, 6000, 'linear', function() {
		$('.timer .timer_right .timer_ticker').animate({rotate: 180}, 6000, 'linear');
	});
	$('.time').countdown();

	$('#set_time')
		.bind('click', function() {
			$('.time').countdown({from: 10});
		});

	$('#stop_time')
		.bind('click', function() {
			$('.time').countdown('Stop');
		});
})
})(jQuery);

	</script>

<style>
.timer {
	border: 1px solid #000;
	height: 100px;
	width: 100px;
	position: relative;
	}

.timer_face {
	position: absolute;
	clip: rect(0 100px 100px 50px);
	height: 100px;
	width: 100px;
	left: 0;
	top: 0;
	}

.timer_left {
	}

.timer_ticker {
	height: 200px;
	width: 200px;
	margin: -50px 0 0 -50px;
	}

.timer_fill {
	height: 200px;
	width: 100px;
	background: #000;
	}
</style>

	<title>Game</title>
</head>
<body id="home" class="">

<div id="set_time">Set Time To 10</div>
<div id="stop_time">Stop</div>

<div id="canvas">
	<div id="combat_log">

	</div>

	<div id="templates">
		<div class="character">
			<div class="buffs">
				<div class="buff">
					<span class="name"></span>
					<span class="stacks"></span>
					<span class="time">12</span>
					<div class="timer">
						<div class="timer_face timer_left">
							<div class="timer_ticker">
								<div class="timer_fill"></div>
							</div>
						</div>
						<div class="timer_face timer_right">
							<div class="timer_ticker">
								<div class="timer_fill"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

</body>
</html>